<template>
	<view>
		<uv-search placeholder="搜一搜 品牌名" margin="10px" v-model="keyword" @change="searchbrand"></uv-search>

		<uv-index-list :index-list="filterIndex" customNavHeight="100rpx">

			<view v-for="(item, index) in filterArr" :key="index">
				<uv-index-item>
					<uv-index-anchor :text="filterIndex[index]" bgColor="#f8f8f8"></uv-index-anchor>
					<uv-grid v-if="filterIndex[index]=='热'" border col="5" >
						<uv-grid-item v-for="cell in item" :key="cell.id" @click="toseries(cell)" border customStyle="padding-top: 12px; padding-bottom: 12px" >
							<uv-icon :name="imghost+cell.icon" width="30px" height="30px"></uv-icon>
							<text class="grid-text text-sm margin-top-xs">{{cell.name}}</text>
						</uv-grid-item>
					</uv-grid>
					<view v-else class="brand-item" v-for="cell in item" :key="cell.id" @click="toseries(cell)" >
						<view class="brand-item_content">
							<image class="brand-item_content_avatar" :src="imghost+cell.icon"></image>
							<text class="brand-item_content_name">{{cell.name}}</text>
						</view>
					</view>

				</uv-index-item>
			</view>
		</uv-index-list>

	</view>
</template>

<script>
	import { getBrandInfo } from '@/utils/http.js'
	import { mapState } from 'vuex'
	import baseapi from '@/config.js'
	export default {
		data() {
			return {
				keyword: '',
				loading: true,
				filterIndex: [],
				filterArr: [],
				urlparm: {},
				imghost: baseapi.api_url
			}
		},
		created() {
			this.searchbrand()
		},
		onLoad(option) {
			this.urlparm = option
		},
		computed: {
			...mapState({
				itemArr: state => state.brand.itemArr,
				indexList: state => state.brand.indexList,
			})
		},
		methods: {
			searchbrand(e) {
				this.filterArr = []
				this.filterIndex = []
				if (this.keyword) {
					//
					for (let i = 0; i < this.indexList.length; i++) {
						var index_item = this.indexList[i]
						var index_arr_list = this.itemArr[i]

						var _filterarr = []
						for (let j = 0; j < index_arr_list.length; j++) {
							var _arritem = index_arr_list[j]
							if (_arritem.name.indexOf(this.keyword) != -1) {
								_filterarr.push(_arritem)
							}
						}
						if (_filterarr.length > 0) {
							this.filterArr.push(_filterarr)
							this.filterIndex.push(index_item)
						}
					}
				} else {
					this.filterArr = this.itemArr
					this.filterIndex = this.indexList
				}

			},
			getbrands() {
				getBrandInfo().then(res => {
					const { indexList, itemArr } = res.data
					this.indexList = indexList
					itemArr.forEach(arr => {
						this.itemArr.push(arr)
					})
					this.searchbrand()
					this.loading = false
				})
			},
			toseries(cell) {
				const item = this.urlparm
				item.brand = cell
				const url = '/pages/brand/series?items=' +
					encodeURIComponent(JSON.stringify(item))
				uni.navigateTo({ url: url })
			},
		},
	}
</script>
<style lang="scss">
	page{
		background: #fff !important;
	}
	.brand-item {

		&_content {
			padding: 16upx;
			display: flex;
			align-items: center;
			flex-direction: row;
			border-bottom: 1upx solid #eee;
			margin:0 20upx;

			&_avatar {
				height: 60upx;
				width: 60upx;
				border-radius: 60upx;
			}

			&_name {
				font-size: 28upx;
				margin-left: 20upx;
			}
		}

	}
	.grid-text{
		line-height: 36upx;
	}
</style>